<template>
  <Menu mode="ver"
    router
    :accordion="false"
    :expand="expand"
    :collapse="collapse"
    :active-name="activeName" >
    <template v-for="(group, i) in menuList">
      <Submenu :name="group.text" v-if="group.children && group.children.length > 0">
        <template slot="title">
          {{group.text}}
        </template>
        <MenuItem v-for="(item, v) in group.children" :key="v" :name="item.url">
          <Icon :type="item.icon" />
          {{item.text}}
        </MenuItem>
      </Submenu>
      <MenuItem v-else :name="group.url">
        <Icon :type="group.icon" />
        {{group.text}}
      </MenuItem>
    </template>
  </Menu>
</template>

<script>
export default {
  name: 'LeftMenu',
  props: {
    collapse: Boolean,
    expand: String
  },
  data () {
    return {
      menuList: [
        {
          text: '介绍',
          url: '/introduce'
        },
        {
          text: '安装',
          url: '/install'
        },
        {
          text: '快速上手',
          url: '/quickStart'
        },
        {
          text: '国际化',
          url: '/language'
        },
        {
          text: '定制主题',
          url: '/custom'
        },
        {
          text: '更新日志',
          url: '/docs'
        },
        {
          text: '基础',
          children: [
            {
              text: 'Icon 图标',
              icon: '',
              url: '/icon'
            },
            {
              text: 'Button 按钮',
              icon: '',
              url: '/button'
            }
          ]
        },
        {
          text: '布局',
          children: [
            {
              text: 'Grid 栅格',
              icon: '',
              url: ''
            }
          ]
        },
        {
          text: '导航',
          children: [
            {
              text: 'Menu 菜单',
              icon: '',
              url: ''
            }
          ]
        },
        {
          text: '表单',
          children: [
            {
              text: 'Input 输入框',
              icon: '',
              url: ''
            }
          ]
        },
        {
          text: '视图',
          children: [
            {
              text: 'Alert 警告提示',
              icon: '',
              url: ''
            }
          ]
        },
        {
          text: '其他',
          children: [
            {
              text: 'Steps 步骤条',
              icon: '',
              url: ''
            }
          ]
        }
      ],
      activeName: ''
    }
  },
  watch: {
    $route (val) {
      this.activeName = val.fullPath
    }
  },
  created () {
    this.activeName = this.$route.fullPath
  },
  methods: {
  }
}
</script>

<style scoped lang="less">
.menv {
  height: 100%;
}
</style>
